<template>
  <div>
    <nav class="panel book-panel">

      <p class="panel-heading">
        会议室查询
      </p>

      <div class="panel-block">
        <div class="field is-grouped">
          <div class="control field-label">
            <label class="label">请选择所在位置：</label>
          </div>
          <p class="control has-icons-left">
            <span class="select">
              <select v-model="buildingStr">
                <option v-for="item in buildings" :key="item.building">
                  {{item.name}}
                </option>
              </select>
            </span>
            <span class="icon is-small is-left">
              <i class="fa fa-building"></i>
            </span>
          </p>

          <p class="control has-icons-left">
              <span class="select">
                <select v-model="floorStr">
                  <option v-for="item in floors" :key="item.floor">
                    {{item.name}}
                  </option>

                </select>
              </span>
            <span class="icon is-small is-left">
                <i class="fa fa-anchor"></i>
              </span>
          </p>

          <p class="control has-icons-left">

            <input class="input" placeholder="参会人数" v-model="searchParam.outNumber">
            <span class="icon is-small is-left">
            <i class="fas fa-envelope fa-users"></i>
          </span>
          </p>
        </div>
      </div>

      <div class="panel-block device-condition">
        <div class="contaniner">

          <input class="is-checkradio  is-info" type="checkbox" id="hasComputer"
                 v-model="searchParam.hasComputer"
                 :checked="searchParam.hasComputer?'checked':''">
          <label for="hasComputer">电脑</label>

          <input class="is-checkradio  is-info" type="checkbox" id="hasProjector"
                 v-model="searchParam.hasProjector"
                 :checked="searchParam.hasProjector?'checked':''">
          <label for="hasProjector">投影仪</label>

          <input class="is-checkradio  is-info" type="checkbox" id="hasScreen"
                 v-model="searchParam.hasScreen"
                 :checked="searchParam.hasScreen?'checked':''">
          <label for="hasScreen">屏幕</label>

          <input class="is-checkradio  is-info" type="checkbox" id="hasWhiteboard"
                 v-model="searchParam.hasWhiteboard"
                 :checked="searchParam.hasWhiteboard?'checked':''">
          <label for="hasWhiteboard">白板</label>

          <input class="is-checkradio  is-info" type="checkbox" id="sortByCapacity"
                 v-model="searchParam.sortByCapacity"
                 :checked="searchParam.sortByCapacity?'checked':''">
          <label for="sortByCapacity">优先会议室人数匹配</label>

        </div>

      </div>

      <a class="panel-block room-lists is-active" v-for="room in meetingRooms" :key="room.id"
         @click="selectRoom(room.id)">
        <span class="panel-icon">
          <i class="fa fa-building" aria-hidden="true"></i>
        </span>
        {{room.name}}
        {{"可容纳："+room.capacity+"人 "}}
        <div class="container">
          <span v-if="room.hasComputer" class="tag is-info">有电脑</span>
          <span v-if="room.hasProjector" class="tag is-primary">有投影仪</span>
          <span v-if="room.hasScreen" class="tag is-danger">有屏幕</span>
          <span v-if="room.hasWhiteboard" class="tag is-success">有白板</span>
        </div>
      </a>

      <div class="panel-block page" v-if="this.meetingRooms.length!==0">
        <paginate class=""
                  :page-count="20"
                  :page-range="3"
                  :margin-pages="2"
                  :click-handler="clickCallback"
                  :prev-text="'上一页'"
                  :next-text="'下一页'"

                  :prev-class="'pagination-previous'"
                  :next-class="'pagination-next'"

                  :container-class="'pagination is-centered'"
                  :page-class="'pagination-link'"
                  :break-view-class="'pagination-ellipsis'"
                  :break-view-link-class="''">
        </paginate>
      </div>

      <div class="panel-block" v-else>
        <div class="container">
          <div class="has-text-centered">
            <p class="label">无结果,请修改查询关键字</p>
          </div>
        </div>
      </div>
    </nav>

    <div class="modal" id="room-info">
      <div class="modal-background" @click="closeModal"></div>
      <div class="modal-card">
        <header class="modal-card-head">
          <p class="modal-card-title">会议室信息</p>
          <button class="delete" aria-label="close" @click="closeModal"></button>
        </header>
        <section class="modal-card-body">
          <div class="label">{{selectedRoom.name}}</div>
          <nav class="level">
            <div class="level-item has-text-centered">
              <div>
                <p class="heading">门号</p>
                <p class="title">{{selectedRoom.code}}</p>
              </div>
            </div>
            <div class="level-item has-text-centered">
              <div>
                <p class="heading">被使用次数</p>
                <p class="title">{{selectedRoom.usingTimes + " 次"}}</p>
              </div>
            </div>
            <div class="level-item has-text-centered">
              <div>
                <p class="heading">楼号</p>
                <p class="title">{{selectedRoom.building +" 号楼"}}</p>
              </div>
            </div>
            <div class="level-item has-text-centered">
              <div>
                <p class="heading">楼层</p>
                <p class="title">{{selectedRoom.floor+ " 层"}}</p>
              </div>
            </div>
          </nav>

          <nav class="level">
            <div class="level-item has-text-centered">
              <div>
                <p class="heading">会议室面积</p>
                <p class="title">{{selectedRoom.area +" 平方米"}}</p>
              </div>
            </div>
            <div class="level-item has-text-centered">
              <div>
                <p class="heading">可以预约</p>
                <p class="title">{{selectedRoom.valid?"是":"否"}}</p>
              </div>
            </div>
            <div class="level-item has-text-centered">
              <div>
                <p class="heading">使用状态</p>
                <p class="title">{{selectedRoom.inUse?"使用中":"空闲"}}</p>
              </div>
            </div>
            <div class="level-item has-text-centered">
              <div>
                <p class="heading">可容纳人数</p>
                <p class="title">{{selectedRoom.capacity + " 人"}}</p>
              </div>
            </div>
          </nav>


        </section>
        <footer v-if="selectedRoom.valid" class="modal-card-foot">
          <button class="button is-info" @click="book">预约</button>
          <button class="button" @click="closeModal">取消</button>
        </footer>
        <footer v-else class="modal-card-foot">
          <button class="button is-info" disabled>不可预约</button>
        </footer>
      </div>
    </div>
  </div>
</template>

<script>
    import 'bulma-checkradio'
    import {toast} from "bulma-toast";
    import Paginate from 'vuejs-paginate'

    export default {
        name: "Search",
        components: {Paginate},
        data: function () {
            return {
                buildings: [
                    {building: 1, name: "一号楼"}, {building: 2, name: "二号楼"}, {building: 3, name: "三号楼"}, {
                        building: 4,
                        name: "四号楼"
                    }, {building: 5, name: "五号楼"}, {building: 6, name: "六号楼"}, {building: 7, name: "七号楼"}, {
                        building: 8,
                        name: "八号楼"
                    }, {building: 9, name: "九号楼"}, {building: 10, name: "十号楼"},
                ],
                floors: [
                    {floor: 1, name: "第 1 层"}, {
                        floor: 2, name: "第 2 层"
                    }, {
                        floor: 3, name: "第 3 层"
                    }, {
                        floor: 4, name: "第 4 层"
                    }, {
                        floor: 5, name: "第 5 层"
                    }, {
                        floor: 6, name: "第 6 层"
                    }, {
                        floor: 7, name: "第 7 层"
                    }, {
                        floor: 8, name: "第 8 层"
                    }, {
                        floor: 9, name: "第 9 层"
                    }, {floor: 10, name: "第 10 层"},
                ],
                meetingRooms: [],
                searchParam: {
                    outNumber: 10,
                    building: 1,
                    floor: 1,
                    hasComputer: false,
                    hasProjector: false,
                    hasScreen: false,
                    hasWhiteboard: false,
                    sortByCapacity: false
                },
                selectedRoom: {
                    id: "1",
                    name: "1号楼1层1号会议室",
                    code: "1-1-1",
                    capacity: 6,
                    area: 100,
                    valid: true,
                    inMaintenance: false,
                    inUse: false,
                    beBooked: false,
                    hasComputer: false,
                    hasProjector: false,
                    hasScreen: false,
                    hasWhiteboard: false,
                    building: 1,
                    floor: 1,
                    usingTimes: 1,
                },
                buildingStr: "一号楼",
                floorStr: "第 1 层",
                page: 1
            }
        },
        methods: {
            clickCallback(pageNum) {
                this.page = pageNum;
            },
            selectRoom(id) {
                //获取指定id的会议室
                let params = {};
                params.meetingRoomId = id;
                fetch('/meetingroom/getInfo', {
                    body: JSON.stringify(params),
                    method: 'POST',
                    headers: {
                        'content-type': 'application/json'
                    },
                }).then(function (res) {
                    return res.json();
                }).then((res) => {
                    if (res.success) {
                        this.selectedRoom = res.data;
                        //打开对话框
                        this.openModal();
                    } else {
                        toast({
                            message: res.errorMessage,
                            type: "is-danger",
                            dismissible: true,
                            pauseOnHover: true
                        });
                    }
                });

            },
            openModal() {
                let infoModal = document.getElementById("room-info");
                infoModal.classList.add("is-active")
            },
            closeModal() {
                let infoModal = document.getElementById("room-info");
                infoModal.classList.remove("is-active")
            },
            checkSearchParam() {
                if (this.searchParam.outNumber < 2) {
                    return false;
                }
                return true;
            },
            search() {
                if (!this.checkSearchParam()) {
                    return;
                }
                //查询会议室结果
                var params = this.searchParam;
                params.page = this.page;
                //发起请求
                fetch('/search/find', {
                    body: JSON.stringify(params),
                    method: 'POST',
                    headers: {
                        'content-type': 'application/json'
                    },
                }).then(function (res) {
                    return res.json();
                }).then((res) => {
                    if (res.success) {
                        //赋值
                        this.meetingRooms = res.data;
                    } else {
                        toast({
                            message: res.errorMessage,
                            type: "is-danger",
                            dismissible: true,
                            pauseOnHover: true
                        });
                    }
                });
            },
            book() {
                let params = {};
                params.meetingRoomId = this.selectedRoom.id;
                fetch('/book', {
                    body: JSON.stringify(params),
                    method: 'POST',
                    headers: {
                        'content-type': 'application/json'
                    },
                }).then(function (res) {
                    return res.json();
                }).then((res) => {
                    if (res.success) {
                        // window.location.reload();
                        toast({
                            message: "成功预约" + this.selectedRoom.name + ",有效时长30分钟\n" + "门禁密码已发送至您的邮箱中",
                            type: "is-success",
                            dismissible: true,
                            pauseOnHover: true,
                            position: "top-center"
                        });
                    } else {
                        toast({
                            message: res.errorMessage,
                            type: "is-danger",
                            dismissible: true,
                            pauseOnHover: true
                        });
                    }
                });
                this.closeModal();
            }
        },
        computed: {},
        watch: {
            buildingStr: function () {
                for (let i = 0; i < 10; i++) {
                    if (this.buildings[i].name === this.buildingStr) {
                        this.searchParam.building = this.buildings[i].building;
                    }
                }
            },
            floorStr: function () {
                for (let i = 0; i < 10; i++) {
                    if (this.floors[i].name === this.floorStr) {
                        this.searchParam.floor = this.floors[i].floor;
                    }
                }
            },
            searchParam: {
                // eslint-disable-next-line
                handler: function (newValue, oldValue) {
                    this.page = 1;
                    this.search();
                },
                deep: true
            },
            page: function () {
                this.search();
            }
        },
        mounted() {
        }
    }
</script>

<style scoped>
  @import '~bulma/css/bulma.css';

  .my-current {
    background-color: #3273dc;
    border-color: #3273dc;
    color: #fff;
  }

  .tag {
    margin-left: 10px;
  }
</style>
